<template>
  <div id="page-sms-send-send">
    <h2>短信发送</h2>

    <Card>
      <h3 class="tc">短信发送</h3>
      <Row>
        <Col span="10" offset="7">
          <Form
          ref="form"
          :model="form.data"
          :rules="ruleValidate"
          :label-width="110"
          class="club-info-form mt20">
            <FormItem prop="content" label="短信内容">
              <Input v-model="form.data.content" type="textarea" :rows="3" placeholder="请输入短信内容"></Input>
            </FormItem>
            <FormItem label="添加手机号">
              <Row>
                <Col span="12">
                  <Input v-model="mobile" type="text" placeholder="请输入手机号" style="width: 100%"></Input>
                </Col>
                <Col span="12">
                  <Button type="info" class="fl ml5" @click="addToSelect()">添加</Button>
                  <Button class="fr" @click="showSelectModal()">从会员选择</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="已选择的手机号" v-if="selectedMobiles.length > 0">
              <Tag type="border" closable
                v-for="(item, index) in selectedMobiles"
                :key="index"
                @on-close="onClose(index)">{{item}}</Tag>
            </FormItem>
            <FormItem label="管理员手机号">
              <Row>
                <Col span="12">
                  {{this.userInfo.mobile}}
                </Col>
                <Col span="12" class="tr">
                  <time-count-btn ref="timeCountBtn" type="info" @run="getSmsCode()"></time-count-btn>
                </Col>
              </Row>
            </FormItem>
            <FormItem prop="mobileCode" label="短信验证">
              <Input v-model="form.data.mobileCode" type="text" placeholder="请输入验证码" :maxlength="6"></Input>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                size="large"
                :loading="isSubmiting"
                @click="onSubmit('form')">
                确认发送
              </Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>

    <sms-send-modal :form="this.modal" :selectedMobiles="selectedMobiles" @select="onSelectedMobile"></sms-send-modal>
  </div>
</template>

<script>
  import _ from 'underscore'
  import { mapGetters } from 'vuex'
  import timeCountBtn from '@/components/time-count-btn'
  import financeApi from '@/api/finance'
  import smsSendModal from './components/sms-send/sms-send-modal'

  export default {
    name: 'page-finance-withdraw',
    components: {
      timeCountBtn,
      smsSendModal
    },
    data () {
      return {
        isSubmiting: false,
        mobile: '',
        selectedMobiles: [],
        form: {
          data: {
            content: '',
            recPhone: ''
          }
        },
        ruleValidate: {
          content: [
            { required: true, message: '请输入短信内容', trigger: 'blur' }
          ],
          mobileCode: [
            { required: true, message: '请输入管理员验证码', trigger: 'blur' }
          ]
        },
        modal: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      addToSelect () {
        if (this.mobile.length > 0) {
          this.selectedMobiles.push(this.mobile)
          this.selectedMobiles = _.uniq(this.selectedMobiles)
          this.mobile = ''
        }
      },
      onSelectedMobile (mobiles) {
        this.selectedMobiles = mobiles
      },
      onClose (index) {
        this.selectedMobiles.splice(index, 1)
      },
      showSelectModal () {
        this.modal.visible = true
      },
      async getSmsCode () {
        const { body } = await financeApi.sendSmsConfirm()
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('短信发送成功')
          this.$refs.timeCountBtn.start()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.$refs.timeCountBtn.stop()
          }, 500)
        }
      },
      onSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      async submitForm () {
        if (this.selectedMobiles.length === 0) {
          this.$Message.info('请输入 或 选择手机号')
          return
        }

        this.form.data.recPhone = this.selectedMobiles.join(',')
        const { body } = await financeApi.sendSms(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('申请成功')
          this.$router.push({path: '/finance/sms-send'})
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
    }
  }
</script>

<style>

</style>
